import React, { Component } from 'react'
import api from '@MODULES/common/api'
import { NavLink, withRouter } from 'react-router-dom'
import './css/malarquee.less'


class Malarquee extends Component {

    constructor(props) {
        super(props)
        this.state = {
            domHeight: this.props.height ? this.props.height * 1 : 0,
        }
    }

    componentDidMount() {
        this.testFun()


        this.timeOut = setInterval(() => this.testFun('time'), 50);

    }



    componentWillUnmount() {
        clearInterval(this.timeOut);

    }



    render() {
        const {contents} = this.props
        return (
            <div id="malarquee" style={{
                height: this.state.domHeight
            }}>
                {
                    contents ? <div>
                        {
                            contents.map((item, index) => {
                                return (<div kye={index}>{item}</div>)
                            })
                        }
                    </div> : ''
                }
                {
                    contents ? <div id="dom">
                        {
                            contents.map((item, index) => {
                                return (<div kye={index}>{item}</div>)
                            })
                        }
                    </div> : ''
                }
            </div>
        )
    }


    testFun = () => {
        try {
            var dome = document.getElementById('malarquee')
            var dome2 = document.getElementById('dom')
            if (dome2.offsetHeight < this.props.height) {
                this.setState({
                    domHeight: dome2.offsetHeight
                })
            }
            if (!(this.state.domHeight > 0)) {
                this.setState({
                    domHeight: dome2.offsetHeight
                })
            }


            if ((dome2.offsetTop - dome.scrollTop) <= 1) {
                dome.scrollTop = 0//dome跳到最顶端
            }
            else {
                dome.scrollTop++
            }
        } catch (error) {

        }

    }
}
export default withRouter(Malarquee)
